<template>
    <Scroll :on-reach-bottom="handleReachBottom" :height="600">
        <Row style="background:#eee;padding:10px" :gutter="16" align="middle">
            <Col span="4" v-for="item in books">
                <Card style="width:210px">
                    <div style="text-align:center">
                        <img @click="notebookDetail(item.productId)" style="width: 180px;height: 235px"
                             :src="item.imgUrl"/>
                        <Rating :value-half="item.highRate"/>
                        <p>{{item.productName}}</p>
                    </div>
                </Card>
            </Col>
        </Row>
    </Scroll>
</template>


<script>
    import Rating from "@/components/Rating";

    export default {
        name: "Notebook",
        components: {
            Rating

        },
        data() {
            return {
                goods: [],
                books: [],
                num: 0


            }
        },
        methods: {
            getGoodsList() {
                window.console.log('*****类型检测1******');
                this.$Loading.config(
                    {
                        color: 'red',
                        height: 4
                    }
                );
                this.$Loading.start();
                this.$http.loadData('list', "", "")
                    .then(res => {
                        window.console.log(res);
                        if (res.data.code === 200) {
                            this.$Loading.finish();
                            window.console.log(res.data.data);
                            this.goods = res.data.data;
                            this.books = this.goods.slice(0, this.goods.length - 699);
                            this.num = this.books.length;
                        } else {
                            this.$Loading.finish();
                            this.$Message.error(res.data.msg);
                        }

                    });
            },

            notebookDetail(bookId) {
                return this.$router.push({path: '/goodsDetail', query: {booksId: bookId}});

            },
            handleReachBottom() {
                return new Promise(resolve => {
                    setTimeout(() => {
                        window.console.log("************books*******", this.books.length);
                        const last = this.num;
                        for (let i = 0; i < 42; i++) {

                            window.console.log('------------------------------', this.goods[last + i]);
                            this.books.push(this.goods[last + i]);
                            this.num = this.books.length;
                        }
                        resolve();
                    }, 2000);
                });
            }
        },

        created() {
            this.getGoodsList();
        }
    }


</script>

<style scoped>

    p {
        width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
        overflow: hidden; /*超出长度的文字隐藏*/
        text-overflow: ellipsis; /*文字隐藏以后添加省略号*/
        white-space: nowrap; /*强制不换行*/
        border: 1px solid white;
    }

</style>
